import 'package:csc_picker/csc_picker.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/controller/register.dart';
import 'package:ichinesereader/models/forms/forms.dart';
import 'package:ichinesereader/models/register/paymentUserInfo.dart';
import 'package:ichinesereader/models/register/proficiencyLevel.dart';
import 'package:ichinesereader/widgets/forms/levelPlacementChoiceChip.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_segmented_control/reactive_segmented_control.dart';

// ignore: must_be_immutable
class LanguageForIndividal extends StatefulWidget {
  LanguageForIndividal({
    Key? key,
  }) : super(key: key);
  @override
  State<LanguageForIndividal> createState() => _LanguageForIndividal();
}

class _LanguageForIndividal extends State<LanguageForIndividal> {
  RegisterController _registerController = Get.find();
  List<ProficiencyLevel> levels = [];
  String? countryValue = 'United States';
  String? stateValue = '';
  @override
  void initState() {
    _registerController.getProficiencyLevel();
    super.initState();
  }

  Widget build(BuildContext context) {
    UserInfoExtraFormModel formModel = UserInfoExtraFormModel();
    String? formCurrentCountry = 'United States', formCurrentState;
    var form = formModel.form;
    // refill user info after come back
    PaymentUserInfo dataForPay = _registerController.userInfo;
    form.control('dateOfBirth').value = dataForPay.dateOfBirth;
    form.control('gender').value = dataForPay.gender;
    form.control('state').value = dataForPay.state;
    form.control('city').value = dataForPay.city;
    form.control('street').value = dataForPay.street;
    form.control('lang').value = dataForPay.settings?.lang ?? 'Mandarin';
    form.control('language').value =
        dataForPay.settings?.language ?? 'Simplified';
    form.control('pinyin').value = dataForPay.settings?.pinyin ?? true;
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("Placement & Language".tr),
          leading: BackButton(onPressed: () {
            Get.toNamed('/account/create/individual',
                arguments: '${Get.arguments}');
          }),
        ),
        body: SingleChildScrollView(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: MediaQuery.of(context).size.width > 1100
                  ? 1100
                  : MediaQuery.of(context).size.width * 0.95,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ReactiveForm(
                    formGroup: form,
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(
                            height: 16,
                          ),
                          Text('more about you'.tr,
                              style: TextStyle(
                                  fontSize: 16,
                                  color: Color(0xff212529),
                                  fontWeight: FontWeight.w600)),
                          Row(
                            children: [
                              Expanded(
                                child: Column(
                                  children: [
                                    ReactiveTextField(
                                      formControlName: 'dateOfBirth'.tr,
                                      style: Theme.of(context)
                                          .textTheme
                                          .titleSmall,
                                      decoration: InputDecoration(
                                          labelText: 'Date Of Birth'.tr +
                                              '(mm/dd/yy)'),
                                    ),
                                    SizedBox(
                                      height: 5,
                                    ),
                                    ReactiveTextField(
                                      formControlName: 'street'.tr,
                                      style: Theme.of(context)
                                          .textTheme
                                          .titleSmall,
                                      decoration: InputDecoration(
                                        labelText: 'Address'.tr,
                                      ),
                                    ),
                                    SizedBox(
                                      height: 5,
                                    ),
                                    // ReactiveTextField(
                                    //   formControlName: 'country',
                                    //   style: Theme.of(context)
                                    //       .textTheme
                                    //       .titleSmall,
                                    //   decoration: InputDecoration(
                                    //     labelText: 'Country'.tr,
                                    //   ),
                                    // ),
                                    SizedBox(
                                      height: 16,
                                    ),
                                  ],
                                ),
                              ),
                              SizedBox(
                                width: 40,
                              ),
                              Expanded(
                                child: Column(
                                  children: [
                                    Row(
                                      children: [
                                        Expanded(
                                          child: ReactiveRadioListTile(
                                              formControlName: 'gender',
                                              value: 'male',
                                              title: Text(
                                                'Male'.tr,
                                                style: TextStyle(fontSize: 16),
                                              )),
                                        ),
                                        Expanded(
                                          child: ReactiveRadioListTile(
                                              formControlName: 'gender',
                                              value: 'female',
                                              title: Text(
                                                'Female'.tr,
                                                style: TextStyle(fontSize: 16),
                                              )),
                                        ),
                                      ],
                                    ),
                                    SizedBox(
                                      height: 5,
                                    ),
                                    ReactiveTextField(
                                        formControlName: 'city',
                                        style: Theme.of(context)
                                            .textTheme
                                            .titleSmall,
                                        decoration: InputDecoration(
                                          labelText: 'City'.tr,
                                          // border: OutlineInputBorder(
                                          //     borderRadius: BorderRadius.circular(8.0)),
                                        )),
                                    // SizedBox(
                                    //   height: 5,
                                    // ),
                                    // ReactiveTextField(
                                    //   formControlName: 'state',
                                    //   style: Theme.of(context)
                                    //       .textTheme
                                    //       .titleSmall,
                                    //   decoration: InputDecoration(
                                    //     labelText: 'State'.tr,
                                    //   ),
                                    // ),
                                    SizedBox(
                                      height: 16,
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                          CSCPicker(
                            currentCountry: formCurrentCountry,
                            currentState: formCurrentState,

                            ///Enable disable state dropdown [OPTIONAL PARAMETER]
                            showStates: true,

                            /// Enable disable city drop down [OPTIONAL PARAMETER]
                            showCities: false,

                            ///Enable (get flag with country name) / Disable (Disable flag) / ShowInDropdownOnly (display flag in dropdown only) [OPTIONAL PARAMETER]
                            flagState: CountryFlag.DISABLE,

                            ///Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabledDropdownDecoration)
                            dropdownDecoration: BoxDecoration(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(3.0)),
                                color: Get.isDarkMode
                                    ? Get.theme.primaryColor
                                    : Colors.transparent,
                                border: Border.all(
                                    color: Get.isDarkMode
                                        ? Colors.transparent
                                        : Colors.grey.shade300,
                                    width: 1)),

                            ///Disabled Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER]  (USE with disabled dropdownDecoration)
                            disabledDropdownDecoration: BoxDecoration(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(3.0),
                                ),
                                color: Colors.white,
                                border: Border.all(
                                    color: Get.isDarkMode
                                        ? Colors.transparent
                                        : Colors.white,
                                    width: 1)),

                            ///placeholders for dropdown search field
                            countrySearchPlaceholder: "Country/Region",
                            stateSearchPlaceholder: "State",
                            citySearchPlaceholder: "City",

                            ///labels for dropdown
                            countryDropdownLabel: "Country/Region".tr,
                            stateDropdownLabel: "State".tr,
                            cityDropdownLabel: "City".tr,

                            ///Default Country
                            // defaultCountry: DefaultCountry.United_States,

                            ///Disable country dropdown (Note: use it with default country)
                            disableCountry: false,

                            ///selected item style [OPTIONAL PARAMETER]
                            selectedItemStyle: TextStyle(
                              color: Colors.black,
                              fontSize: 15,
                            ),

                            ///DropdownDialog Heading style [OPTIONAL PARAMETER]
                            dropdownHeadingStyle: TextStyle(
                                color: Get.isDarkMode
                                    ? Get.theme.primaryColorDark
                                    : Colors.black,
                                fontSize: 18,
                                fontWeight: FontWeight.bold),

                            ///DropdownDialog Item style [OPTIONAL PARAMETER]
                            dropdownItemStyle: TextStyle(
                              color: Get.isDarkMode
                                  ? Get.theme.primaryColorDark
                                  : Colors.black,
                              fontSize: 15,
                            ),

                            ///Dialog box radius [OPTIONAL PARAMETER]
                            dropdownDialogRadius: 6.0,

                            ///Search bar radius [OPTIONAL PARAMETER]
                            searchBarRadius: 6.0,

                            ///triggers once country selected in dropdown
                            onCountryChanged: (value) {
                              setState(() {
                                countryValue = value;
                              });
                            },

                            ///triggers once state selected in dropdown
                            onStateChanged: (value) {
                              setState(() {
                                ///store value in state variable
                                stateValue = value;
                              });
                            },

                            ///triggers once city selected in dropdown
                            onCityChanged: (value) {
                              // setState(() {
                              //   ///store value in city variable
                              //   cityValue = value;
                              // });
                            },
                          ),
                          LevelPlacementChioceChipWidget(),
                          SizedBox(
                            height: 8,
                          ),
                          Text(
                            'followingwords'.tr,
                            style: TextStyle(fontSize: 12),
                          ),
                          SizedBox(
                            height: 8,
                          ),
                          Obx(() {
                            return Card(
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 20),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                    const SizedBox(height: 15),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: <Widget>[
                                        Expanded(
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                              Text(
                                                  '${_registerController.sampleText}',
                                                  style:
                                                      TextStyle(fontSize: 16)),
                                            ])),
                                      ],
                                    ),
                                    const SizedBox(height: 15),
                                  ],
                                ),
                              ),
                            );
                          }),

                          SizedBox(
                            height: 20,
                          ),
                          ReactiveSegmentedControl<String, String>(
                            formControlName: 'language',
                            decoration: InputDecoration(
                              labelText: 'Text'.tr,
                              border: OutlineInputBorder(),
                              helperText: '',
                            ),
                            unselectedColor: Get.theme.primaryColorLight,
                            padding: const EdgeInsets.all(0.0),
                            children: {
                              'Simplified': Text('Simplified'.tr,
                                  style: TextStyle(
                                    color: Color(0xff00599b),
                                    fontSize: 16.0,
                                    letterSpacing: 1.0,
                                  )),
                              'Traditional': Text('Traditional'.tr,
                                  style: TextStyle(
                                    color: Color(0xff00599b),
                                    fontSize: 16.0,
                                    letterSpacing: 1.0,
                                  )),
                              'No text': Text('No Text'.tr,
                                  style: TextStyle(
                                    color: Color(0xff00599b),
                                    fontSize: 16.0,
                                    letterSpacing: 1.0,
                                  )),
                            },
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          ReactiveSegmentedControl<String, String>(
                            formControlName: 'lang',
                            decoration: InputDecoration(
                              labelText: 'Audio'.tr,
                              border: OutlineInputBorder(),
                              helperText: '',
                            ),
                            padding: const EdgeInsets.all(0),
                            unselectedColor: Get.theme.primaryColorLight,
                            children: {
                              'Mandarin': Text('Mandarin'.tr,
                                  style: TextStyle(
                                    color: Color(0xff00599b),
                                    fontSize: 16.0,
                                    letterSpacing: 1.0,
                                  )),
                              'Cantonese': Text('Cantonese'.tr,
                                  style: TextStyle(
                                    color: Color(0xff00599b),
                                    fontSize: 16.0,
                                    letterSpacing: 1.0,
                                  )),
                              'No_audio': Text('No Audio'.tr,
                                  style: TextStyle(
                                    color: Color(0xff00599b),
                                    fontSize: 16.0,
                                    letterSpacing: 1.0,
                                  )),
                            },
                          ),
                          // SizedBox(
                          //   height: 12,
                          // ),
                          ReactiveSwitchListTile(
                            title: Text(
                              'Pinyin'.tr,
                              style: Theme.of(context).textTheme.displaySmall,
                            ),
                            subtitle: Text(
                              'When text option set to NO TEXT, pinyin can not be displayed.'
                                  .tr,
                              // style:
                              //     Theme.of(context).textTheme.labelSmall,
                            ),
                            formControlName: 'pinyin',
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              OutlinedButton(
                                child: Text('Back'.tr,
                                    style: TextStyle(
                                        fontSize: 16,
                                        fontWeight: FontWeight.w500)),
                                onPressed: () {
                                  Get.toNamed('/account/create/individual',
                                      arguments: '${Get.arguments}');
                                },
                              ),
                              ReactiveFormConsumer(
                                  builder: (context, form, child) {
                                return OutlinedButton(
                                  child: Text('Next'.tr,
                                      style: TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.w500)),
                                  onPressed: () {
                                    // if (!form.valid) {
                                    //   form.markAllAsTouched();
                                    //   return;
                                    // }
                                    PaymentUserInfo dto =
                                        _registerController.userInfo;
                                    Settings setting = new Settings();
                                    dto.dateOfBirth =
                                        form.control('dateOfBirth').value;
                                    dto.gender = form.control('gender').value;
                                    dto.state = stateValue;
                                    dto.city = form.control('city').value;
                                    dto.street = form.control('street').value;
                                    dto.country = countryValue;
                                    setting.language =
                                        form.control('language').value;
                                    setting.lang = form.control('lang').value;
                                    setting.pinyin =
                                        form.control('pinyin').value;
                                    dto.settings = setting;
                                    dto.level = 'level' +
                                        _registerController.levelIndex.value
                                            .toString();
                                    _registerController.setUserInfo(dto);
                                    Get.toNamed(
                                        '/account/create/individual/condition');
                                  },
                                );
                              }),
                              const SizedBox(width: 8),
                            ],
                          ),
                        ]),
                  ),
                ],
              ),
            ),
          ],
        )));
  }
}
